<div class="form__wrapper">
  <div class="card" data-controller="accordion" id="accordion-title">
    <div class="card-divider">
      <button class="card-divider-button" data-open="true" data-controls="panel-title" type="button">
        <%= icon "arrow-right-s-line" %>
        <h2 class="card-title" id="title">
          <%= t("title", scope: "decidim.participatory_processes.admin.participatory_processes.form") %>
        </h2>
      </button>
    </div>
    <div id="panel-title" class="card-section">
      <div class="row column">
        <%= form.translated :text_field, :title, autofocus: true, aria: { label: :title } %>
      </div>

      <div class="row column">
        <%= form.translated :text_field, :subtitle, aria: { label: :subtitle } %>
      </div>

      <div class="row column">
        <%= form.number_field :weight %>
      </div>

      <div class="row">
        <div class="columns" data-controller="slug">
          <%= form.text_field :slug, help_text: t(".slug_help_html", url: decidim_form_slug_url(:processes, form.object.slug)) %>
        </div>
      </div>

      <div class="row column">
        <%= form.translated :editor, :short_description, resource_mentionable: true, aria: { label: :short_description } %>
      </div>

      <div class="row column">
        <%= form.translated :editor, :description, resource_mentionable: true, aria: { label: :description } %>
      </div>

      <div class="row column">
        <%= form.translated :editor, :announcement, help_text: t(".announcement_help") %>
      </div>
    </div>
  </div>

  <div class="card" data-controller="accordion" id="accordion-duration">
    <div class="card-divider">
      <button class="card-divider-button" data-open="true" data-controls="panel-duration" type="button">
        <svg viewBox="0 0 24 24" id="ri-arrow-right-s-line">
          <path fill="none" d="M0 0h24v24H0z" />
          <path d="M13.172 12l-4.95-4.95 1.414-1.414L16 12l-6.364 6.364-1.414-1.414z" />
        </svg>
        <h2 class="card-title" id="duration">
          <%= t("duration", scope: "decidim.participatory_processes.admin.participatory_processes.form") %>
        </h2>
      </button>
    </div>

    <div id="panel-duration" class="card-section">
      <div class="row">
        <div class="columns">
          <%= form.date_field :start_date %>
        </div>

        <div class="columns">
          <%= form.date_field :end_date %>
        </div>
      </div>
    </div>
  </div>

  <div class="card" data-controller="accordion" id="accordion-images">
    <div class="card-divider">
      <button class="card-divider-button" data-open="true" data-controls="panel-images" type="button">
        <%= icon "arrow-right-s-line" %>
        <h2 class="card-title" id="images">
          <%= t("images", scope: "decidim.participatory_processes.admin.participatory_processes.form") %>
        </h2>
      </button>
    </div>

    <div id="panel-images" class="card-section">
      <div class="row">
        <div class="columns">
          <%= form.upload :hero_image, button_class: "button button__sm button__transparent-secondary" %>
        </div>
      </div>
    </div>
  </div>

  <div class="card" data-controller="accordion" id="accordion-metadata">
    <div class="card-divider">
      <button class="card-divider-button" data-open="true" data-controls="panel-metadata" type="button">
        <%= icon "arrow-right-s-line" %>
        <h2 class="card-title" id="metadata">
          <%= t("metadata", scope: "decidim.participatory_processes.admin.participatory_processes.form") %>
        </h2>
      </button>
    </div>
    <div id="panel-metadata" class="card-section">
      <div class="row column">
        <%= form.translated :text_field, :developer_group, aria: { label: :developer_group } %>
      </div>

      <div class="row column">
        <%= form.translated :text_field, :local_area, aria: { label: :local_area } %>
      </div>

      <div class="row column">
        <%= form.translated :text_field, :meta_scope, aria: { label: :meta_scope } %>
      </div>

      <div class="row column">
        <%= form.translated :text_field, :target, aria: { label: :target } %>
      </div>

      <div class="row column">
        <%= form.translated :text_field, :participatory_scope, aria: { label: :participatory_scope } %>
      </div>

      <div class="row column">
        <%= form.translated :text_field, :participatory_structure, aria: { label: :participatory_structure } %>
      </div>
    </div>
  </div>

  <div class="card" data-controller="accordion" id="accordion-taxonomies">
    <div class="card-divider">
      <button class="card-divider-button" data-open="true" data-controls="panel-taxonomies" type="button">
        <%= icon "arrow-right-s-line" %>
        <h2 class="card-title" id="taxonomies">
          <%= t("taxonomies", scope: "decidim.participatory_processes.admin.participatory_processes.form") %>
        </h2>
      </button>
    </div>
    <div id="panel-taxonomies" class="card-section">
      <% if @form.taxonomy_filters.blank? %>
        <div class="row column">
          <p class="text-gray mr-2 mt-4">
            <%= t("no_taxonomy_filters_found", scope: "decidim.participatory_processes.admin.participatory_processes.form") %>
            <%= link_to(t("define_taxonomy_filters", scope: "decidim.participatory_processes.admin.participatory_processes.form"), decidim_admin.taxonomies_path, class: "button button__text-secondary") %>
          </p>
        </div>
      <% else %>
        <% @form.taxonomy_filters.each do |filter| %>
          <div class="row column">
            <%= filter_taxonomy_items_select_field form, :taxonomies, filter %>
          </div>
        <% end %>
      <% end %>
    </div>
  </div>

  <div class="card" data-controller="accordion" id="accordion-visibility">
    <div class="card-divider">
      <button class="card-divider-button" data-open="true" data-controls="panel-visibility" type="button">
        <%= icon "arrow-right-s-line" %>
        <h2 class="card-title" id="visibility">
          <%= t("visibility", scope: "decidim.participatory_processes.admin.participatory_processes.form") %>
        </h2>
      </button>
    </div>
    <div id="panel-visibility" class="card-section">
      <div class="row column">
        <% if process_groups_for_select %>
          <%= form.select :participatory_process_group_id,
                          process_groups_for_select,
                          include_blank: t(".select_process_group") %>
        <% end %>
      </div>

      <div class="row column">
        <%= form.check_box :private_space %>
        <p class="help-text"><%= t(".private_notice") %></p>
      </div>
      <div class="row column">
        <%= form.check_box :promoted %>
      </div>
    </div>
  </div>

  <div class="card" data-controller="accordion" id="accordion-related_processes">
    <div class="card-divider">
      <button class="card-divider-button" data-open="true" data-controls="panel-related_processes" type="button">
        <%= icon "arrow-right-s-line" %>
        <h2 class="card-title" id="related_processes">
          <%= t("related_processes", scope: "decidim.participatory_processes.admin.participatory_processes.form") %>
        </h2>
      </button>
    </div>
    <div id="panel-related_processes" class="card-section">
      <div class="row column">
        <%= form.select(
          :related_process_ids,
          @form.processes.order(title: :asc).map { |process| [translated_attribute(process.title), process.id] },
          { include_blank: true },
          { multiple: true, class: "chosen-select" }
        ) %>
      </div>
    </div>
  </div>
</div>
